import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Rate, Button, Modal, Typography } from 'antd';
import { useTranslation } from 'react-i18next';

import styles from './styles.module.less';

const { Paragraph } = Typography;

const RowCard = ({ businessInfoData }) => {
  const navigate = useNavigate();
  const { t } = useTranslation();
  console.log(businessInfoData)

  const copyCompanyModal = (title = '') => {
    console.log(title);
    Modal.info({
      title: (
        <div style={{ display: 'flex' }}>
          {t('Contact Details')}：
          <Paragraph
            copyable={{
              tooltips: false,
            }}
          >
            {title}
          </Paragraph>
        </div>
      ),
      onOk() {},
      maskClosable: true
    })
  }

  return (
    <div className={styles.row_card}>
      {
        businessInfoData?.business_server_list?.map(item => (
          <div className={styles.card} key={item.business_server_id}>
            <div className={styles.company} onClick={() => {
              navigate(`/supplier-company`, { state: item });
            }}>
              <img src={item.company?.logo_path} alt='' />
              <div className={styles.right}>
                <div className={styles.name}>{item.company?.company_name}</div>
                <div><Rate disabled defaultValue={5} style={{ fontSize: 14 }} /></div>
                <div>{t('Comment')}：({item.comment_number})</div>
                {/*<div className={styles.reviews}>没有评论</div>*/}
              </div>
            </div>
            <div className={styles.describe}>
              {item.company?.description}
            </div>
            {/*<div className={styles.show_more}>*/}
            {/*  <span>{'Show More >>'}</span>*/}
            {/*</div>*/}
            <div className={styles.services_box}>
              <span className={styles.label}>{t('Serve')}：</span>
              <span>{item.company?.company_business?.map(item => item.business_name)?.join('，')}</span>
            </div>
            <div className={styles.contact_box}>
              <Button type='primary' onClick={() => copyCompanyModal(item.company?.contact_details)}>{t('Contact Supplier')}</Button>
            </div>
          </div>
        ))
      }
    </div>
  )
};

export default RowCard;